<template>
    <div>
        <div class="jingao" v-if="datalist.length == 0">
            <!-- <span>您暂时还没有创建任何论坛哦!</span> -->
            <el-result icon="info" title="信息提示" subTitle="您暂时还没有创建任何论坛哦">
                <template slot="extra">
                    <el-button type="primary" size="medium">前往创建</el-button>
                </template>
            </el-result>
        </div>
        <div>
            <div class="latest_box" v-if="datalist.length!=0">
                <div style="padding:10px 0;">
                     <span style="font-weight:bolder;font-size:20px;color:#f04494;">|</span> <span style="font-size:20px;color:#4e5358;font-weight:bolder;">我管理的论坛</span></div>
                <div class="article_box">
                <div class="article_item"
                    v-for="(item,index) in datalist"
                    :key="item.id">
                    <!-- 图片部分 -->
                    <div class="img_box " :style="`background-image: url(${item.indexImage});`">
                        <div class="mask"></div>
                        </div>
                        <!-- 简介部分 -->
                        <div class="summary_box" style="display: flex;flex-flow: column; justify-content: space-between;">
                        <!-- 标题 -->
                            <h3>{{item.talkName}}</h3>
                            <div class="summary-content"
                            style="font-size: 14px; color: gray;margin-left: 10px;"
                            >{{item.summary}}</div>

                            <!-- 发布者信息 -->
                            <div class="" style="display: flex; justify-content: space-between;flex-flow: row;">
                                <div class="publisher_box">
                                    <div class="avatar_box">
                                        <img :src="user.avatar"
                                            style="width: 100%; height: 100%;" />
                                    </div>
                                    <div style="margin-left:10px;color:gray;">{{user.nickname}}</div>

                                </div>
                                
                                <div style="margin-left: 10px; color:gray;
                                width: 250px;text-overflow: ellipsis;
                                white-space: nowrap;">创建时间：{{item.createTime}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {GETUSERLZDATA} from "@/api/user"
export default {
    name: 'SchoolForumLzgl',

        data() {
        return {
            user:this.$store.state.user.user,
            datalist:[],
            fysj:{
                current:1,
                size:7
            }
        };
    },

    mounted() {
        // 初始化数据
        this.getUserLZData()
    },

    methods: {
        getUserLZData(){
            GETUSERLZDATA(this.fysj.current,this.fysj.size).then(res=>{
                this.datalist = res.list
                console.log(this.datalist);
            })
        },
    },
};
</script>

<style lang="scss" scoped>

.jingao{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
        color:gray;
        font-size: 20px;
        font-weight: bold;
    }
}
.mask{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 44%, rgba(51, 51, 51, 0) 99%);
}
.latest_box {
      // border: 1px solid red;
      // 帖子
      .article_box {
        // overflow: hidden;
        .article_item {
            padding: 20px;
          display: flex;
          // align-items: center;
          margin: 15px 0;
          background-color: rgba(230, 230, 230, 0.55);
          border-radius: 15px;
          box-sizing: border-box;
          padding: 30px 15px;

          // 图片部分
          .img_box {
            // border: 1px solid blue;
            // flex: 1;
            border-radius: 15px;
            overflow: hidden;
            object-fit: cover;
            width: 200px;
            height: 133px;
            background-size: 150%;
            background-position: center;
            background-repeat: no-repeat;
            transition: all .5s;
            margin-right: 30px;
            cursor: pointer;
            img {
              // width: 100%;
              max-width: 100%;
              max-height: 100%;
              // border: 1px solid #e1e1e1;
              // border-radius: 15px;
            }
          }
          // 简介部分
          .summary_box {
            position: relative;
            flex: 3;
            // border: 1px solid red;
            line-height: 30px;
            h3 {
              cursor: pointer;
            }
            h3:hover {
              color: red;
            }
            // 发布者信息
            .publisher_box {
              display: flex;
              align-items: center;
            //   position: absolute;
              bottom: 0;
              // 头像
              .avatar_box {
                width: 30px;
                height: 30px;
                border: 1px solid #e1e1e1;
                border-radius: 50%;
                overflow: hidden;
              }
            }
          }
        }
      }
    }

.summary-content{
    margin-top: 10px;

}
.article_item:hover .img_box{
  background-size: 160% !important;
}
</style>